<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100%;
				height: 200px;
				background-color: aliceblue;
			}

            /* 
			  @media: 定义媒体查询 
			  媒体类型: all    用于所有媒体类型设备
			           screen 用于电脑屏幕，平板，手机
		    */
		   
		    /* 小于500px 页面背景颜色变为orange */
			@media screen and (max-width:499px) {
				div {
					background-color: orange;
				}
			}
            /* 500~900  页面背景颜色变为red */
			@media screen and (min-width:500px) {
				div {
					background-color: red;
				}
			}
			
			/* 大于900px 页面背景颜色变为greenyellow */
			@media screen and (min-width:900px) {
				div {
					background-color: greenyellow;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
